<template>
  <div class="app-container">
    <el-card shadow="always">
      <div class="title">
        <span />
        <p>查询条件</p>
      </div>

      <el-form :model="seachForm" label-width="120px">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="菜单名称">
              <el-input v-model="seachForm.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>

          <el-col :span="24" style="text-align: right">
            <el-button type="primary" @click="getInit(1)">查询</el-button>
            <el-button @click="rest">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="always" style="margin-top: 15px">
      <div class="header">
        <div class="title">
          <span />
          <p>菜单列表</p>
        </div>

        <div>
          <el-button type="primary" size="small" @click="addFromClick">新增</el-button>
          <el-button type="primary" size="small">删除</el-button>
        </div>
      </div>
      <TableView :data-list="dataList" :loading="loading" :total="seachForm.total" :size="seachForm.size"
        :page="seachForm.page" @pagination="pagination" rowKey="id">
        <div slot="column">
          <el-table-column label="菜单名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.meta.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="路由地址" align="center" prop="path" show-overflow-tooltip />
          <el-table-column label="标识" align="center" prop="name" show-overflow-tooltip />
          <el-table-column label="是否开启" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isOpen" active-color="#13ce66" inactive-color="#999999"
                @change="changeIsOpen(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="图标" align="center" prop="modelType" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.meta.icon }}</span>
            </template>
          </el-table-column>
          <el-table-column label="组件地址" align="center" prop="componentPath" show-overflow-tooltip />
          <el-table-column label="重定向地址" align="center" prop="redirect" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip />
          <el-table-column label="描述" align="center" prop="remark" show-overflow-tooltip />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="addChildren(scope.row)">添加</el-button>
              <el-button type="text" @click="editFrom(scope.row)">编辑</el-button>
              <el-button type="text" @click="deleteMenuClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </div>
      </TableView>
    </el-card>

    <el-dialog title="新增菜单" :visible.sync="isShowAddMenu">
      <el-form ref="addFrom" label-width="120px" :model="addFrom" :rules="rules">
        <el-row :gutter="12">
          <el-col :span="24" v-if="addFrom.parentName">
            <el-form-item label="父级菜单名称: ">
              <el-input v-model="addFrom.parentName" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="菜单名称: ">
              <el-input v-model="addFrom.meta.title" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标识: ">
              <el-input v-model="addFrom.name" placeholder="请输入菜单标识" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="菜单地址: ">
              <el-input v-model="addFrom.path" placeholder="请输入菜单地址" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否开启: ">
              <el-switch v-model="addFrom.isOpen" active-color="#13ce66" inactive-color="#999999" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="图标: ">
              <el-input v-model="addFrom.meta.icon" placeholder="请输入菜单图标" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="组件地址: ">
              <el-input v-model="addFrom.componentPath" placeholder="请输入组件地址" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="重定向地址: ">
              <el-input v-model="addFrom.redirect" placeholder="请输入重定向地址" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="描述: ">
              <el-input type="textarea" v-model="addFrom.remark" placeholder="请输入菜单描述" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="margin-top: 10px; text-align: center">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button @click="isShowAddMenu = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableView from "@/components/TableView/index.vue";
import { addMenu, queryMenu, deleteMenu } from "@/api/systemManagement.js";
export default {
  components: {
    TableView,
  },
  data() {
    return {
      dataList: [],
      loading: false,
      seachForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      addFrom: {
        meta: {},
      },
      selectTable: [],
      isShowAddMenu: false,
      rules: [],
    };
  },

  mounted() {
    this.getInit();
  },

  methods: {
    async getInit(page) {
      this.loading = true;
      this.seachForm.page = page || 1;
      let result = await queryMenu(this.seachForm);
      if (result.code == 20000) {
        this.dataList = result.data || [];
        this.seachForm.total = result.total;
      } else {
        this.$message.error(result.msg);
      }
      this.loading = false;
    },

    // 点击新增方法
    addFromClick() {
      this.addFrom = {
        meta: {},
      };
      this.isShowAddMenu = true;
    },

    // 添加确定按钮
    async confirm() {
      let result = await addMenu(this.addFrom);
      if (result.code == 20000) {
        this.$message.success(result.msg);
        this.isShowAddMenu = false;
        this.getInit();
      }
    },

    // 是否改变发生变化
    async changeIsOpen(row) {
      await addMenu(row);
    },

    // 删除
    deleteMenuClick(row) {
      this.$confirm("是否确认删除该菜单？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let result = await deleteMenu({ id: row.id });
        debugger;
        if (result.code == 20000) {
          this.$message.success(result.msg);
          this.getInit();
        }
      });
    },

    // 编辑
    editFrom(row) {
      this.addFrom = { ...row };
      this.isShowAddMenu = true;
    },

    // 添加子集
    addChildren(row) {
      this.addFrom = {
        meta: {},
      };
      this.addFrom.parentId = row.id;
      this.addFrom.parentName = row.meta.title;
      this.isShowAddMenu = true;
    },

    rest() {
      this.seachForm = {};
      this.getInit();
    },

    // 分页相关
    pagination(e) {
      this.seachForm = e;
      this.getInit();
    },

    // 选择表格
    selectionChange(e) {
      this.selectTable = e;
    },
  },
};
</script>

<style></style>
